body,html
{
	margin: 0px;
	padding: 0px;
	background: #f6f6f6;
	width: 100%;
	height: 100%;
}

body>div
{
	width: 100%;
	height: 100%;
}



/*顶部*/
.top
{
	width: 100%;
	height: 40px;
	background: #dfdfde;
}
.top span
{
	margin-left: 10%;
	padding-top: 8px;
	font-size: 12px;
	
	width: 25%;
}

@media screen and (max-width:900px ) 
{
	.top
	{
		height: 60px;
	}
	.lb img
	{
		height: 300px;
	}
}


.top nav
{
	float: right;
	margin-right: 10%;
	padding-top: 8px;
}
.logo input
{
	display: none;
}
.top nav a
{
	margin-left: 10px;
	
}
/*logo与导航*/
.logo
{
	width: 100%;
	height: 100px;
	background: #FFFFFF;
}
.logo img
{
	display:inline-block;
	margin-left:11%;
	margin-top: 20px;
	padding-bottom: 20px;
}
.mc p
{
	color: #000000;
	
}
.mc
{
	position: absolute;
	display:inline-block;
	margin-left: 10px;
	padding-top: 15px;
}
@media screen and (max-width:470px ) 
{
	.mc h1
	{
		font-size: 24px;
	}
	.mc p
	{
		display: none;
	}
}
.dh
{
	float: right;
	margin-right: 10%;
}
.dh li
{
	display: inline-block;
	padding-top: 20px;
	padding-bottom: 34px;
	width: 85px;
	text-align: center;
	transition: all .3s ease-in-out;
}
.dh span
{
	text-align: center;
}
.dh li:hover
{
	background: #DFDFDE;
	border-bottom: 4px solid #3c9cd3;
}

/*轮播图*/
.lb
{
	width: 100%;
	height: auto;
}
.lb img
{
	width: 100%;
	height: 500px;
}
.lb label
{
	width: 15px;
	height: 15px;
	background:#a3d3e9;
	border-radius: 50%;
}
.lb input
{
	display: none;
}
.lb div
{
	position: relative;
	text-align: center;
	top: -50px;
}
.lb label
{
	margin-left: 20px;
}
.lb label:checked
{
	background: #2395cb;
}


.images2,.images3,.images4
{
	display: none;
}


input[id="img1"]:checked~.images1
{
	display: block;
	z-index: 111;
}
input[id="img1"]:checked~.images2,
input[id="img1"]:checked~.images3,
input[id="img1"]:checked~.images4
{
	display: none;
	z-index: -111;
}
input[id="img2"]:checked~.images2
{
	display: block;
	z-index: 111;
}
input[id="img2"]:checked~.images3,
input[id="img2"]:checked~.images1,
input[id="img2"]:checked~.images4
{
	display: none;
	z-index: -111;
}
input[id="img3"]:checked~.images3
{
	display: block;
	z-index: 111;
}
input[id="img3"]:checked~.images1,
input[id="img3"]:checked~.images2,
input[id="img3"]:checked~.images4
{
	display: none;
	z-index: -111;
}
input[id="img4"]:checked~.images4
{
	display: block;
	z-index: 111;
}
input[id="img4"]:checked~.images1,
input[id="img4"]:checked~.images2,
input[id="img4"]:checked~.images3
{
	display: none;
	z-index: -111;
}
input#img1:checked ~ div label#image1,
input#img2:checked ~ div label#image2,
input#img3:checked ~ div label#image3,
input#img4:checked ~ div label#image4 
{
    background: rgba(35, 149, 203,1);
}
.menu {
    width: 50px;
    height: 50px;
    float: right;
    cursor: pointer;
    display: none;
    margin-right: 10px;
}
.menu span {
    width: 80%;
    height: 5px;
    background: #0B5AE4;
    float: left;
    margin: 9px auto 0;
}


@media screen and (max-width: 1220px)
{
	input[name='dh']:checked + .menu 
	{
	    transform: rotate(90deg);
	}
	.menu 
	{
	    display: inline-block;
	    transition: all .2s linear;
	    margin-top:40px
	}
	.dh 
	{
		width: 100%;
    	display: none;
    	margin: 0;
    	margin-top: 20px;
    	float: left;
    	padding: 0;
	}
	.dh li 
   {
   	
	    width: 100%;
	    text-align: center;
	    background: #fff;
   }
}
input[id='dh']:checked~.dh
{
	display: block;
}

/*底部*/
.bottom
{
	width: 100%;
	height: 125px;
	background: #3c9cd3;
	position: relative;
	top:0px;
}
.bottom p
{
	padding-top: 20px;
	color: #FFFFFF;
}
.bottom p img
{
	margin-left: 10px;
	position: relative;
	top: 5px;
}
.bottom nav
{
   text-align: center;
}
.bottom nav span
{
    width: 15px;
    text-align: center;
    font-size: 40px;
    position: relative;
    top: 7px;
}
.bottom nav a
{
	color: #FFFFFF;
}
.bottom-b
{
	width: 100%;
	height: 45px;
	background: #1c1b29;
}
.bottom-b p
{
    line-height: 40px;
}

@media screen and (max-width:1200px ) 
{
	.mood-y,.mood-zh,.mood-z
	{
		display:block;
		margin-top: 50px;
		margin-left: 6%;
	}
}
@media screen and (max-width:1250px ) 
{
	.about p,.contact p
	{
		font-size: 10px;
	}
	
}
@media only screen and (max-width:400px ) 
{
	.about p,.contact p
	{
		display: none;
	}
	.about hr,.contact hr
	{
		display: none;
	}
	.About-img img
	{
		width: 100%;
		height: 150px;
	}
	.mood-y,.mood-z,.mood-zh
	{
		width: 345px;
		float: none;
		margin: 0px;
	}
	
	
}
@media screen and (max-width:650px ) 
{
	.bottom
	{
		height: 200px;
	}
	.bottom-b
	{
		height: 100px;
	}
}
